<script setup lang="ts">
import { provide, reactive, ref, shallowRef } from 'vue'
import { base64ToBlob, mimeTypes } from '../../utils/blob'
import { merge } from 'lodash-es'

const props = defineProps({
    host: {
        type: String,
        default: 'https://unshell.github.io/expand/ads.html'
    }
})

const emit = defineEmits(['confirm', 'close', 'open'])

const formRef = shallowRef()

const visible = ref(false)
const menu = reactive<ChatMenu>({
    id: '',
    type: 0,
    image: '',
    imageBlobUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
    title: '',
    description: '',
    isTop: false,
    isRead: true,
    isMute: false,
    time: '',
    chats: []
})

const options = reactive({
    menuType: [
        { label: '聊天', value: 0 },
        { label: '折叠的聊天', value: 8 },
        { label: '公众号', value: 1 },
        { label: '服务号', value: 2 },
        { label: '服务通知', value: 7 },
        { label: '腾讯新闻', value: 3 },
        { label: '微信游戏', value: 4 },
        { label: '文件传输助手', value: 5 },
        { label: '微信团队', value: 6 }
    ]
})

const rules = reactive({
    title: [
        { required: true, message: '请输入标题', trigger: 'blur' },
    ],
    image: [
        { required: true, message: '请选择头像', trigger: 'blur' },
    ],
    time: [
        { required: true, message: '请选择时间', trigger: 'blur' },
    ]
})

const chooseAvatar = async () => {
    if (menu.type !== 0) return false
    const file = await window.ipcRenderer.invoke('select-local-file', {
        properties: ['openFile'],
        filters: [{ name: '图片文件', extensions: ['png', 'jpg', 'jpeg', 'gif'] }]
    }, true)

    if (file) {
        const blob = base64ToBlob(file.base64, mimeTypes(file.ext))
        menu.image = file.path
        menu.imageBlobUrl = URL.createObjectURL(blob)
    }
}

const handleMenuTypeChange = (value: number) => {
    let url = new URL(props.host),
        option = options.menuType.find(item => item.value === value)

    if (value === 0) {
        menu.title = ''
        menu.image = ''
        menu.imageBlobUrl = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
    } else {
        menu.title = option?.label || ''
        menu.image = `${url.origin}/assets/ads/wechat/${option?.label}.jpg`
        menu.imageBlobUrl = menu.image
    }
}

const confirm = async () => {
    await formRef.value?.validate()
    emit('confirm', menu)
    close()
}

const close = () => {
    visible.value = false
    emit('close')
}

const open = (data: ChatMenu) => {
    if (data && data.id) {
        merge(menu, data)
    }
    visible.value = true
}

provide('visible', visible)

defineExpose({
    visible,
    confirm,
    close,
    open
})
</script>
<template>
    <el-dialog class="no-drag" v-model="visible" :append-to-body="true" draggable @closed="close">
        <template #header>新增聊天</template>
        <!-- 自定义内容 -->
        <el-form ref="formRef" label-position="top" label-width="90px" :model="menu" :rules="rules"
            style="max-width: 460px" status-icon>
            <el-form-item label="类型:" prop="type">
                <el-select v-model="menu.type" placeholder="请选择类型" @change="handleMenuTypeChange">
                    <el-option v-for="type in options.menuType" :key="type.value" :label="type.label"
                        :value="type.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="头像:" prop="image">
                <el-avatar shape="square" :size="55" :fit="menu.imageBlobUrl" :src="menu.imageBlobUrl"
                    @click="chooseAvatar" />
            </el-form-item>
            <el-form-item label="标题:" prop="title">
                <el-input v-model="menu.title" :disabled="menu.type !== 0" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="描述:" prop="description">
                <el-input v-model="menu.description" :rows="2" type="textarea" placeholder="请输入描述" />
            </el-form-item>
            <el-form-item label="时间:" prop="time">
                <el-date-picker v-model="menu.time" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime" placeholder="请选择时间" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="close">
                    取消
                </el-button>
                <el-button type="primary" @click="confirm">
                    保存
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.el-avatar {
    cursor: pointer;
}
</style>